<template>
  <el-container class="container">
    <el-aside class="aside">
      <el-avatar>{{contact.user.name[0]}}</el-avatar>
    </el-aside>
    <el-main class="main">
      <div class="user-info">
        <div class="user-name">{{contact.user.name}}</div>
        <div class="enterprise-role" v-if="contact.enterprise.enterprise_id !== undefined">
          {{contact.enterprise.enterprise_name}} | {{contact.enterprise.is_admin ? "HR" : "职员"}}
        </div>
      </div>
      <div v-if="contact.last_message.msg_id !== undefined">
        <div class="message-detail">
          <div class="last-message-content">{{truncateMessage(contact.last_message.content, 40)}}</div>
          <div class="last-message-time">{{contact.last_message.send_time}}未读：{{contact.unread_count}}</div>
        </div>
        <unread-badge :unread-count="contact.unread_count" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import UnreadBadge from "@/components/UnreadBadge.vue";

export default {
  name: "ContactEle",
  components: {UnreadBadge},
  props: {
    contact: {
      type: Object,
    }
  },
  methods: {
    truncateMessage(message, maxLength) {
      if (!message || message.length <= maxLength) {
        return message;
      } else {
        return message.substring(0, maxLength - 3) + '...';
      }
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
}
.aside {
  width: 50px;
  height: 100%;
  padding: 0;
}
.main {
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.user-info {
  /*height: 25px;*/
}
.user-name {
  height: 18px;
  width: fit-content;
  line-height: 25px;
  font-size: 16px;
  margin: 0 0 0 0;
}
.enterprise-role {
  height: 16px;
  width: fit-content;
  line-height: 25px;
  font-size: 12px;
  margin: 0 0 0 0px;
  color: #909399;
}
.message-detail {
  display: inline-block;
  width: 90%;
}
.last-message-content {
  height: 15px;
  line-height: 15px;
  font-size: 14px;
  margin: 10px 0 0 0;
}
.last-message-time {
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  color: #606266;
  margin: 10px 0 0 0;
}
</style>